<template>
  <div class="overview">
    <h2>overview</h2>
    <cy-card title="关于">
      <div class="c-left">
        Vue3Admin 是基于 Vue3、Vuex、VueRouter、Webpack、ElementPlus
        、TypeScript、Echart5 等后台系统解决方案。
      </div>
    </cy-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import CyCard from '@/base-ui/card'

export default defineComponent({
  name: 'overview',
  components: { CyCard },
  setup() {
    return {}
  }
})
</script>

<style scoped lang="less">
.overview {
  .c-left {
    text-align: left;
  }

  .el-card {
    margin-bottom: 20px;
    // ::v-deep 重写 element-plus 样式
    &:deep(.el-card__header span) {
      // ::v-deep .el-card__header span {
      font-weight: 700;
    }
  }

  .description {
    // ::v-deep 重写 element-plus 样式
    &:deep(.el-descriptions__title) {
      // ::v-deep .el-descriptions__title {
      font-weight: 400;
    }
  }
}
</style>
